Code Splitting

Catalyst utilizes loadable-components for efficient code splitting on both the client and server. It offers built-in support for code splitting, making it easy to split your code into smaller chunks.

Example: Lazy Loading the Footer Component.

import loadable from "@loadable/component"
import Header from "@components/Header/Header.js"
import MainContent from "@pages/MainContent/MainContent.js"
const Footer = loadable(()=> import("@components/Footer/Footer.js"),{
        fallback: <div>Fallback</div>,
        ssr:false
})

const App = () => {
  return (
    <>
      <Header />
      <MainContent />
      <Footer />
    </>
  );
};

Arguments Accepted by the loadable Function:

• loader function: The function responsible for loading the component.
• options.fallback: A fallback component displayed during loading.
• options.ssr: If set to false, the component won’t be processed server-side (defaults to true).

For more details, refer to the loadable-components documentation.

---

Code Splitting Strategies

Route-based code splitting

Route-based code splitting is a powerful technique in React applications. It loads code for specific routes or pages only when needed, improving initial load times and reducing JavaScript download size.

In Catalyst, you can achieve route-based code splitting by lazy loading your pages in src/js/routes/index.js.

src/js/routes/index.js

import HomeFallback from "@Fallback/HomeFallback/HomeFallback.js"
const Home = loadable (() => "@pages/Home/Home.js",{
    ssr:false,
    fallback: <HomeFallback />
})

const routes = [
  {
    path: "/",
    end: true,
    component: Home,
  },
];

---

Component based code splitting

When optimizing your application’s performance, component-based code splitting is a powerful strategy. It allows you to load specific components only when needed, based on certain conditions. For instance, you might want to render a component only if a user is logged in.

const UserDetails = loadable(()=> import("@components/UserDetails/UserDetails.js"),
{
    ssr:false,
})

const Profile = ({ isLoggedIn }) => {
  if (isLoggedIn) {
    return <UserDetails />;
  } else {
    <button label="Log In" />;
  }
};


export default Profile